<template>
  <div class="account-manage-index sub-margin">
    <div class="sub-page-title">延期管理</div>
    <div class="content">
      <DelayTable ref="accountTable" :source="userList" @search="onSearch" @delay="onDelay" @endVip="onEnd">
        <pagination
          slot="pagination"
          :page-size="10"
          :total="totalSize"
          :current-page="currentPage"
          @change="onPageChange"></pagination>
      </DelayTable>
    </div>
    <AccountDialog :visible.sync="showDetail" :info="curInfo" @close="onClose"></AccountDialog>
    <!-- 申请延期 -->
    <DelayDialog :visible.sync="visible" @submit="updateExpireTime"></DelayDialog>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { cloneDeep } from 'lodash'
import pagination from '@com/pagination'
import DelayTable from './components/DelayTable.vue'
import AccountDialog from './components/AccountDialog'
import DelayDialog from './components/DelayDialog'
import { listTenantDelay, updateDelayStatus } from '@api/modules/system.js'

export default {
  name: 'accountManageIndex',
  components: { pagination, DelayTable, AccountDialog, DelayDialog },
  data() {
    return {
      allData: [],
      userList: [],
      showDialog: false,
      curInfo: {},
      totalSize: 0,
      pageSize: 10,
      currentPage: 1,
      showDetail: false,
      visible: false,
    }
  },
  computed: {
    ...mapGetters('role', ['isOperateRole']),
  },
  created() {
    if (this.isOperateRole) {
      this.getDelayList()
    }
  },
  methods: {
    async getDelayList(obj) {
      const params = {
        keywords: '',
        status: '',
        userId: '',
        tenantId: '',
      }
      if (obj) {
        params.keywords = obj.key || ''
        params.status = obj.status || ''
      }
      const { code = 0, data = [] } = await listTenantDelay(params)
      if (code === 0 && data && data.length) {
        const userList = data || []
        this.totalSize = data.length || 0
        userList.forEach((item, inx) => {
          item.orderNum = this.pageSize * (this.currentPage - 1) + (inx + 1)
        })
        this.userList = userList.slice(this.pageSize * (this.currentPage - 1), this.pageSize * this.currentPage)
        this.allData = userList
      } else {
        this.totalSize = 0
        this.allData = []
        this.userList = []
      }
    },
    onPageChange(obj) {
      this.currentPage = obj.pageNumber
      this.pageSize = obj.pageSize
      const allData = cloneDeep(this.allData)
      this.userList = allData.slice(this.pageSize * (this.currentPage - 1), this.pageSize * this.currentPage)
    },
    async updateExpireTime(time) {
      const { status } = await updateDelayStatus({ delayTime: time, status: 1, id: this.curInfo.id })
      if (status === 200) {
        this.visible = false
        this.curInfo = {}
        this.$message.success('延期申请成功')
        this.getDelayList()
      }
    },
    onSearch(obj) {
      this.currentPage = 1
      this.pageSize = 10
      this.getDelayList(obj)
    },
    onDelay(obj) {
      this.curInfo = obj
      this.visible = true
    },
    onTenantDetail(obj) {
      this.curInfo = obj
      this.showDetail = true
    },
    onClose() {
      this.curInfo = {}
      this.showDetail = false
    },
    onEnd(obj) {
      this.$confirm('确定终止吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(async () => {
          const { status } = await updateDelayStatus({ delayTime: '', status: 2, id: obj.id })
          if (status === 200) {
            this.curInfo = {}
            this.$message.success('终止使用成功')
            this.getDelayList()
          }
        })
        .catch(() => {})
    },
  },
}
</script>
<style lang="scss" scoped>
@import '@styles/layout.scss';
.account-manage-index {
  display: flex;
  flex-direction: column;
  height: 100%;
  .content {
    flex: 1;
    padding: 20px 0;
    // display: flex;
    // align-items: stretch;
  }
}
</style>
